const util = require('../../utils/util.js');
const api = require('../../config/api.js');

Component({
  properties: {
    visible: { type: Boolean, value: false },
    top: { type: Number, value: 0 }, // 弹窗顶部位置，单位px
    value: { type: [Number, String], value: null }, // 当前选中的雪场ID，用于回显
    showAllOption: { type: Boolean, value: true }, // 是否显示"不限"选项，默认为true
    showTopMask: { type: Boolean, value: true } // 是否显示上遮罩，默认为true
  },
  observers: {
    'top': function(top) {
      // 保证panelBottom始终为panel下沿
      this.setData({ panelBottom: (parseInt(top || 0, 10) + 320) });
    },
    'visible': function(visible) {
      if (visible) {
        // 组件打开时，如果还没有加载数据，则加载数据
        if (!this.data.categories || this.data.categories.length === 0) {
          this.loadData();
        } else {
          // 如果已有数据，执行回显
          this._updateDisplayFromValue();
        }
      }
    },
    'value': function(value) {
      // 当value变化时，更新显示
      if (this.properties.visible) {
        this._updateDisplayFromValue();
      }
    }
  },
  data: {
    panelBottom: 320, // 初始化为最低点
    categories: [], // 左侧地区列表
    optionsMap: {}, // 每个地区对应的雪场列表
    activeCategory: '', // 当前选中的地区ID
    selectedOption: null, // 当前选中的雪场ID（内部状态）
    loading: false // 数据加载状态
  },
  lifetimes: {
    attached: function() {
      // 组件挂载时预加载数据
      this.loadData();
    }
  },
  methods: {
    /**
     * 加载区域树形数据
     */
    loadData: function() {
      const that = this;
      
      if (that.data.loading) {
        return; // 防止重复请求
      }
      
      that.setData({ loading: true });
      
      // 优先使用新的树形接口
      util
        .request(api.RegionTree, {}, "GET", "application/json")
        .then(function (res) {
          console.log("SkiDropdown: 区域树形数据加载成功:", res);
          if (String(res.code) === "200" || String(res.code) === "0") {
            that._processTreeData(res.data);
          } else {
            console.error("SkiDropdown: 区域树形数据加载失败:", res.msg);
            that._loadDataFallback();
          }
        })
        .catch(function (err) {
          console.error("SkiDropdown: 区域树形数据请求失败:", err);
          // 如果新接口失败，尝试使用旧接口作为降级方案
          that._loadDataFallback();
        })
        .finally(function() {
          that.setData({ loading: false });
        });
    },
    
    /**
     * 降级方案：使用旧的公共信息接口
     */
    _loadDataFallback: function() {
      const that = this;
      util
        .request(api.PublicInfo, {}, "POST", "application/json")
        .then(function (res) {
          console.log("SkiDropdown: 公共信息加载成功:", res);
          if (String(res.code) === "200" || String(res.code) === "0") {
            // 将旧格式转换为树形格式，创建一个默认地区
            const skiList = res.data.skiList || [];
            const treeData = [{
              id: 1, // 使用默认ID
              name: '全部',
              children: skiList
            }];
            that._processTreeData(treeData);
          } else {
            console.error("SkiDropdown: 公共信息加载失败:", res.msg);
          }
        })
        .catch(function (err) {
          console.error("SkiDropdown: 公共信息请求失败:", err);
        });
    },
    
    /**
     * 处理树形数据，转换为组件需要的格式
     */
    _processTreeData: function(treeData) {
      if (!treeData || !Array.isArray(treeData) || treeData.length === 0) {
        return;
      }

      const that = this;

      // 构建 categories（左侧地区列表）
      const categories = treeData.map(function (region) {
        return {
          id: String(region.id),
          name: region.name
        };
      });

      // 构建 optionsMap（每个地区对应的雪场列表）
      const optionsMap = {};
      treeData.forEach(function (region) {
        if (region.children && Array.isArray(region.children)) {
          optionsMap[String(region.id)] = region.children.map(function (ski) {
            return {
              id: ski.id,
              name: ski.name
            };
          });
        } else {
          optionsMap[String(region.id)] = [];
        }
      });

      // 设置默认选中的地区（第一个地区）
      const defaultCategory = categories.length > 0 ? String(categories[0].id) : '';
      
      that.setData({
        categories: categories,
        optionsMap: optionsMap,
        activeCategory: defaultCategory
      });
      
      // 数据加载完成后，执行回显
      that._updateDisplayFromValue();
    },
    
    /**
     * 根据value更新显示状态（回显）
     */
    _updateDisplayFromValue: function() {
      const value = this.properties.value;
      const optionsMap = this.data.optionsMap || {};
      const categories = this.data.categories || [];
      
      // 如果value为null、undefined或空字符串，重置选中状态
      if (!value || value === null || value === undefined || value === '' || categories.length === 0) {
        this.setData({
          activeCategory: categories.length > 0 ? String(categories[0].id) : 'all',
          selectedOption: null
        });
        return;
      }
      
      // 将value转换为字符串用于比较
      const valueStr = String(value);
      
      // 先检查"全部"选项（all）
      const allOptions = Array.isArray(optionsMap['all']) ? optionsMap['all'] : [];
      const foundInAll = allOptions.find(option => {
        if (!option) return false;
        return String(option.id) === valueStr;
      });
      
      if (foundInAll) {
        // 在"全部"中找到，需要找到它所属的地区
        for (let i = 0; i < categories.length; i++) {
          const category = categories[i];
          if (!category || typeof category !== 'object' || !category.id) continue;
          
          const categoryId = String(category.id);
          const options = Array.isArray(optionsMap[categoryId]) ? optionsMap[categoryId] : [];
          
          const foundInCategory = options.find(option => {
            if (!option) return false;
            return String(option.id) === valueStr;
          });
          
          if (foundInCategory) {
            // 找到匹配的雪场，设置对应的地区和选中状态
            this.setData({
              activeCategory: categoryId,
              selectedOption: foundInCategory.id
            });
            console.log('SkiDropdown: 回显成功，雪场ID:', foundInCategory.id, '地区ID:', categoryId);
            return;
          }
        }
      }
      
      // 遍历所有地区，找到匹配的雪场
      for (let i = 0; i < categories.length; i++) {
        const category = categories[i];
        if (!category || typeof category !== 'object' || !category.id) continue;
        
        const categoryId = String(category.id);
        const options = Array.isArray(optionsMap[categoryId]) ? optionsMap[categoryId] : [];
        
        const foundSki = options.find(option => {
          if (!option) return false;
          return String(option.id) === valueStr;
        });
        
        if (foundSki) {
          // 找到匹配的雪场，设置对应的地区和选中状态
          this.setData({
            activeCategory: categoryId,
            selectedOption: foundSki.id
          });
          console.log('SkiDropdown: 回显成功，雪场ID:', foundSki.id, '地区ID:', categoryId);
          return;
        }
      }
      
      // 如果没找到匹配的雪场，使用默认值（第一个地区，不选中任何雪场）
      console.warn('SkiDropdown: 未找到匹配的雪场，value:', value);
      this.setData({
        activeCategory: categories.length > 0 ? String(categories[0].id) : 'all',
        selectedOption: null
      });
    },
    
    onCategoryTap(e) {
      const categoryId = e.currentTarget.dataset.id;
      const options = this.data.optionsMap[categoryId] || [];
      
      // 切换分类时，如果有选中的值且在新分类中存在，保持选中；否则清空
      let nextSelected = null;
      if (this.data.selectedOption && options.length > 0) {
        const found = options.find(opt => 
          opt.id === this.data.selectedOption || String(opt.id) === String(this.data.selectedOption)
        );
        if (found) {
          nextSelected = this.data.selectedOption;
        }
      }
      
      this.setData({
        activeCategory: categoryId,
        selectedOption: nextSelected
      });
    },
    
    onOptionTap(e) {
      const optionId = e.currentTarget.dataset.id;
      const optionName = e.currentTarget.dataset.name;
      
      // 更新内部选中状态
      this.setData({
        selectedOption: optionId
      });
      
      // 触发change事件，通知外部
      this.triggerEvent('change', {
        value: optionId,
        name: optionName
      });
      
      // 触发close事件，关闭弹窗
      this.triggerEvent('close');
    },
    
    onResetOptionTap() {
      // 重置选中状态
      this.setData({
        selectedOption: null
      });
      
      // 触发change事件，传递null表示不限
      this.triggerEvent('change', {
        value: null,
        name: '不限'
      });
      
      // 触发close事件，关闭弹窗
      this.triggerEvent('close');
    },
    
    onMaskTap() {
      this.triggerEvent('close');
    }
  }
});
